<template>
  <div style="padding: 12px;">
    <div
      style="padding: 12px 20px;margin-bottom: 12px;display: flex;align-items: center;justify-content: space-between; background-color: #EFEFEF "
      @click="showListField=!showListField">
      <div style="color:#409EFF">显示列</div>
      <el-icon style="color:#409EFF" :name="showListField?'arrow-down':'arrow-up'"></el-icon>
    </div>
    <div style="margin-top: 12px;width: 100%" v-if="showListField">
      <el-col :span="8">
        <el-form-item label="基本信息">
          <el-select v-model="data.baseField" style="display: flex;flex: 1" multiple clearable collapse-tags
                     @change="change"
                     filterable>
            <el-option value="全选" label="全选" @click.native="data.baseField=list.baseFields"></el-option>
            <el-option :value="item" :key="item" :label="item" v-for="item in list.baseFields" multiple></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="list.medicalFields&&list.medicalFields.length>0">
        <el-form-item label="使用药物">
          <el-select v-model="data.medicalField" style="display: flex;flex: 1" multiple clearable collapse-tags
                     filterable @change="change">
            <el-option value="全选" label="全选" @click.native="data.medicalField=list.medicalFields"></el-option>
            <el-option :value="item" :key="item" :label="item" v-for="item in list.medicalFields"
                       multiple></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="list.clinicFields&&list.clinicFields.length>0">
        <el-form-item label="门诊结果">
          <el-select v-model="data.clinicField" style="display: flex;flex: 1" multiple clearable collapse-tags
                     filterable @change="change">
            <el-option value="全选" label="全选" @click.native="data.clinicField=list.clinicFields"></el-option>
            <el-option :value="item" :key="item" :label="item"
                       v-for="item in list.clinicFields"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="list.attachFields&&list.attachFields.length>0">
        <el-form-item label="住院附加">
          <el-select v-model="data.attachField" style="display: flex;flex: 1" multiple clearable collapse-tags
                     filterable @change="change">
            <el-option value="全选" label="全选" @click.native="data.attachField=list.attachFields"></el-option>
            <el-option :value="item" :key="item" :label="item"
                       v-for="item in list.attachFields"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="list.packsFields&&list.packsFields.length>0">
        <el-form-item label="影像结果">
          <el-select v-model="data.packsField" style="display: flex;flex: 1" multiple clearable collapse-tags
                     filterable @change="change">
            <el-option value="全选" label="全选" @click.native="data.packsField=list.packsFields"></el-option>
            <el-option :value="item" :key="item" :label="item"
                       v-for="item in list.packsFields"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="list.lisFields&&list.lisFields.length>0">
        <el-form-item label="实验室结果">
          <el-select v-model="data.lisField" style="display: flex;flex: 1" multiple clearable collapse-tags
                     filterable @change="change">
            <el-option value="全选" label="全选" @click.native="data.lisField=list.lisFields"></el-option>
            <el-option :value="item" :key="item" :label="item"
                       v-for="item in list.lisFields"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </div>
  </div>
</template>

<script>

export default {
  name: 'advance-field-filter',
  props: {
    list: {
      type: [Object],
      default() {
        return {
          baseFields: [],
          medicalFields: [], // 住院用药
          medicalResultList: [], // 用药结局
          maternalResultList: [], // 孕产妇结局
          childResultList: [], // 新生儿急剧
          packsFields: [], // 影像诊断
          lisFields: [], // 实验室诊断
          clinicFields: [],
          attachFields: []
        }
      }
    },
    value: {
      type: [Object],
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      showListField: true,
      data: {
        clinicField: [],
        medicalField: [],
        packsField: [],
        lisField: [],
        medicalResultField: [],
        maternalResultField: [],
        attachField: [],
        baseField: []
      }
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(newVal, oldVal) {
        if (oldVal !== newVal) {
          this.data = newVal
        }
      }
    }
  },
  created() {
  },
  methods: {
    change() {
      console.log(this.data)
      this.$emit('confirm', this.data)
    }
  }
}
</script>

<style scoped>

</style>
